<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions' %>
<%@ taglib prefix ="spring" uri = "http://www.springframework.org/tags" %>
<%@ taglib uri="/WEB-INF/out-tabs.tld" prefix="out" %>
<head>
	<link rel="stylesheet" type="text/css" href="<c:url value="/static/css/time-line.css"/>"></link>
</head>
<c:set var="index" value="0"></c:set>
<c:url value="/event/" var="event-url"/>
<div>
	<ul class="reference">
		<li>
			<div class="booked ref"></div><span>Agendado Sin Ticket</span>
		</li>
		<li>
			<div class="buyed ref"></div><span>Agendado con Ticket</span>
		</li>
	</ul>
</div>
<div class="time_line_container">
	<div class="time_line">
		<c:set var="even" value="true"></c:set>
		<c:set var="index" value="0"></c:set>
		<c:forEach items="${appointments}" var="appointment">
		<c:set var="status" value="booked"></c:set>
		<c:if test="${appointment.haveTickets}">
			<c:set var="status" value="buyed"></c:set>
		</c:if> 
				<c:if test="${even}">
					<ul class="milestone_even">
						<li>
							<ul class="appointment ${status} ">
									<li>
										<div id="event_display">
											<c:url value="/image/80/80/${appointment.flyer}" var="img_src"/>
											<div ><img class="event_flyer" src="${img_src}"/></div>
											<div><a href="<c:url value="/event/${appointment.eventId}"/>">${appointment.title}</a></div>
											<div><span class="event_date"><out:date date="${appointment.appointmentDate}" timezoneId="${appointment.timezone}"></out:date></span></div>
											<div><span class="event_place">${appointment.place}</span></div>
											<div><span class="event_address">${appointment.address}</span></div>
										</div>
									</li>
							</ul>
						</li>
						<li class="canvas"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" ><polygon points=" 0 0,100 50,100 50,200 0" class="${status}" /></svg></li>
						<li><out:date date="${appointment.appointmentDate}" timezoneId="${appointment.timezone}"></out:date></li>
						<li style="display: inline-block"><svg style="height: 10px;" ><line x1="0" y1="0" x2="0" y2="10" style="stroke:black;stroke-width:5px"/></svg></li>
					</ul>
				</c:if>
				<c:set var="even" value="${!even}"></c:set>
				<c:set var="index" value="${index+1}"></c:set>
		</c:forEach>
		<c:set var="odd" value="false"></c:set>
	</div>
	<div><svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: ${fn:length(appointments) * 200}px; height: 5px;" ><line x1="0" y1="0" x2="${fn:length(appointments) * 200}" y2="0" style="stroke:black;stroke-width:5px"/></svg></div>
	<div class="time_line" style="border: none;">
		<c:forEach items="${appointments}" var="appointment">
				<c:set var="status" value="booked"></c:set>
				<c:if test="${appointment.haveTickets}">
					<c:set var="status" value="buyed"></c:set>
				</c:if> 
				<c:if test="${odd}">
					<ul class="milestone_odd">
							<li style="display: inline-block"><svg style="height: 10px;" ><line x1="0" y1="0" x2="0" y2="10" style="stroke:black;stroke-width:5px"/></svg></li>
							<li><out:date date="${appointment.appointmentDate}" timezoneId="${appointment.timezone}"></out:date></li>
							<li class="canvas"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" ><polygon points="0 50,100 0,100 0,200 50" class="${status}" /></svg></li>
							<li>
								<ul class="appointment ${status}">
										<li><a href="<c:url value="/event/${appointment.eventId}"/>">${appointment.title}</a></li>
										<li><out:date date="${appointment.appointmentDate}" timezoneId="${appointment.timezone}"></out:date></li>
								</ul>
							</li>
					</ul>
				</c:if>
				<c:set var="odd" value="${!odd}"></c:set>
		</c:forEach>
	</div>
</div>

